<div class="tabDirectiveCss">
    <style>
        .tabDirectiveCss a{
            padding: 6px 10px;
            border:solid 2px #aaa;
            text-decoration: none;
            display: inline-block;
            color: #666;
        }
        .tabDirectiveCss a.active{
            background: #aaa;
            color:#fff;
        }
        .tabDirectiveCss div.lists{
            border:solid 2px #aaa;
            padding: 20px;
            width: 300px;
            height:200px;
            margin-top: -2px;
        }
    </style>

    <a href="" ng-class="{active:$first}" ng-repeat="(k,v) in data">{{v.title}}</a>
    <div class="lists" ng-repeat="v in data" ng-style="{display:$first ? 'block':'none'}">
        <ul ng-repeat="m in v.data">
            <li>{{m.title}}</li>
        </ul>
    </div>

</div>